<template>
    <div class="card">
        <!-- 标题区域 -->
        <div class="card-header">学习计划表</div>
        <!-- 提交区域 -->
        <div class="card-body">
            <form>
                <div class="row g-4">
                    <!-- 学习科目 -->
                    <div class="col-auto">
                        <div class="input-group mb-3">
                            <span class="input-group-text">学习科目</span>
                            <input type="text" class="form-control" 
                            placeholder="请输入学习科目" v-model="plan.subject"/>
                        </div>
                    </div>
                    <!-- 学习内容 -->
                    <div class="col-auto">
                        <div class="input-group mb-3">
                            <span class="input-group-text">学习内容</span>
                            <textarea class="form-control" placeholder="请输入学习内容" 
                            style="height: 38px;" v-model="plan.content"></textarea>
                        </div>
                    </div>
                    <!-- 学习地点 -->
                    <div class="col-auto">
                        <div class="input-group mb-3">
                            <span class="input-group-text">学习地点</span>
                            <select class="form-select form-select-sm" 
                            v-model="plan.place">
                                <option v-for="(item, index) in options" 
                                :key="item.id" :value="item.place">
                                    {{ item.place }}
                                </option>
                            </select>
                        </div>
                    </div>
                    <!-- 添加按钮 -->
                    <div class="col-auto">
                        <button type="button" class="btn btn-primary" 
                        @click="add">添加</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <table class="table table-striped table-hover table-bordered">
        <thead>
            <tr>
                <th>序号</th>
                <th>学习科目</th>
                <th>学习内容</th>
                <th>学习地点</th>
                <th>完成状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in list" :key="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.subject }}</td>
                <td>{{ item.content }}</td>
                <td>{{ item.place }}</td>
                <td>
                    <div class="form-check form-switch">
                        <input class="form-check-input" 
                        type="checkbox" role="switch" 
                        :id="'status-' + item.id" v-model="item.status"/>
                        <label class="form-check-label" 
                        :for="'status-' + item.id">
                            {{ item.status ? '已完成' : '未完成' }}
                        </label>
                    </div>
                </td>
                <td>
                    <button :disabled="!item.status" @click="remove(index)"
                    class="btn btn-sm btn-outline-secondary">
                        删除
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
</template>
<script setup>
import { ref, reactive, computed } from 'vue'
// 做表格渲染（查）,v-for指令
const list = reactive([
    {
        id: 1,
        subject: 'Web前端框架项目开发',
        content: '学习指令，例如v-if、v-for、v-model等',
        place: 'C1408',
        status: false
    },
    {
        id: 2,
        subject: 'Web前端框架项目开发',
        content: '学习指令，例如v-if、v-for、v-model等',
        place: 'C1408',
        status: false
    }
])
const options = reactive([
    {id: 1, place: 'C1408'},
    {id: 2, place: '图书馆'},
    {id: 3, place: '宿舍'}
])
const plan = reactive({
    subject: '',
    content: '',
    place: options[0].place
})

const remove = (index) => {
    // 从数组中删除某个元素
    list.splice(index, 1)
}
// 动态计算当前数组中最大的id是多少
const nextId = computed(() => {
    // 得到了每一项的id装入一个新数组
    let id_arr = []
    for(let i = 0; i < list.length; i++) {
        id_arr.push(list[i].id)
    }
    console.log(id_arr)
    let arr = list.map(item => item.id)
    console.log(arr)
    return Math.max(...arr) + 1
})

const add = () => {
    // 判断科目是否重复
    // 判断科目是否为空
    list.push(
        {
            id: nextId.value,
            subject: plan.subject,
            content: plan.content,
            place: plan.place,
            status: false
        }
    )
}
</script>
<style scoped>
tr {
    vertical-align: bottom;
}
</style>